<script setup lang="ts">
import {onBeforeMount, onBeforeUnmount, onMounted} from "vue";
import Members from "./Members.vue";
import LeftAside from "./LeftAside.vue";
import SearchUser from "./SearchUser.vue";
import RightAsideHeader from "./RightAsideHeader.vue";
import RightAsideMain from "./RightAsideMain.vue";
import RightAsideFooter from "./RightAsideFooter.vue";
import {UserInfoType} from "../types/types.ts";
import {windowClose} from "../event/window_close.ts";
import loadFriends from "../actions/load_friends.ts";

import {storeToRefs} from "pinia";
import {useUserFriendsStore} from "../stores/user_friends.ts";
import {useUserStore} from "../stores/user.ts";
import {sendLoginMessage} from "../actions/send_login_message.ts";
import {receiveMessage} from "../event/receive_message.ts";
import {sendMessageOtherWindow} from "../event/send_message_other_window.ts";
import {addListener, unListen} from "../actions/listeners.ts"

const size: number = 25;
let {toUserAccount} = storeToRefs(useUserStore());
let {friends} = storeToRefs(useUserFriendsStore());
function toUserAccountSelected(account) {
  toUserAccount.value = account;
}
onMounted(async () => {
  unListen();
  console.log("Main component mounted");
  await windowClose().then(() => {
    console.log("js window-close event listener started");
  });
  await loadFriends().then((data: UserInfoType[]) => {
    friends.value = data;
  });
  await receiveMessage().then(() => {
    console.log("js receive-message event listener started");
    sendLoginMessage();
  });
  await sendMessageOtherWindow().then(() => {
    console.log("js send-message-other-window event listener started");
  });
})
onBeforeMount(() => {
  unListen();
  console.log("Main component before mount");
})
</script>
<template>
  <el-container style="height: 100%">
    <LeftAside :size="size" />
    <el-aside class="el-aside-two">
      <SearchUser />
      <Members :height="'calc(100% - 50px) !important'" :item-click="toUserAccountSelected" :data="friends" />
    </el-aside>
    <el-container style="flex-direction: column">
      <RightAsideHeader />
      <RightAsideMain />
      <RightAsideFooter />
    </el-container>
  </el-container>
</template>
<style scoped>
.el-aside-two {
  width: 265px;
  height: 100%;
}
</style>